<template>
<!-- 商品列表页头部 商品搜索功能 -->
  <div class="product-list-header">
    <i class="icon icon-zuojiantou" @click="$router.go(-1)"></i>
      <div class="content">
        <i class="icon icon-wxbsousuotuiguang"></i>
        <slot name="contents">
          <input type="text" placeholder="搜索商品" @keydown="search" v-model="goods">
        </slot>
      </div>
    <i class="icon icon-qita"></i>
  </div>
</template>

<script>
export default {
  data(){
    return {
      goods:''
    }
  },
  methods:{
    search(){
      this.$emit('search',this.goods)
    }
  }
}
</script>

<style scoped>
  .product-list-header{
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100px;
    padding: 0 30px;
    justify-content: space-between;
    box-sizing: border-box;
    align-items: center;
    color: rgb(101, 103, 113);
    background-color: white;
    z-index: 1;
  }
  .icon-zuojiantou{
    font-size: 50px;
  }
  .icon-qita{
    font-size: 40px;
  }
  .content{
    display: flex;
    align-items: center;
    width: 525px;
    height: 40px;
    background-color: #f7f7f7;
    padding: 10px 0;
    border-radius: 40px;
  }
  .icon-wxbsousuotuiguang{
    font-size: 34px;
    margin: 0 10px 0 40px;
  }
  input{
    height: 40px;
    background-color: #f7f7f7;
    font-size: 24px;
  }
  input::placeholder{
    color: rgb(207, 207, 207);
  }
</style>